<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格合并(table merge)</title>
  <!-- 
    在HTML表格中，合并单元格是一种常见的操作，可以将相邻的单元格合并成一个大的单元格，以展示更复杂的表格结构。以下是关于HTML和CSS中表格合并单元格的主要要点： 
 
      1. 合并行（Rowspan）：通过设置 rowspan 属性来合并单元格的行，指定一个单元格占据的行数。例如， <td rowspan="2"> 表示该单元格将占据两行。 
      2. 合并列（Colspan）：通过设置 colspan 属性来合并单元格的列，指定一个单元格占据的列数。例如， <td colspan="2"> 表示该单元格将占据两列。 
      3. 跨行跨列合并：可以同时使用 rowspan 和 colspan 属性来实现单元格的跨行跨列合并，创建更复杂的表格结构。 
   -->
   <style>
     table {
       border-collapse: collapse;
       margin-bottom: 16px;
     }

     td {
       border: 1px solid black;
       padding: 8px;
     }
   </style>
</head>
<body>

  <!-- 跨列 -->
  <table>
    <caption>跨列</caption>
    <tr>
      <td colspan="2">1-1</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
  </table>

  <!-- 跨行 -->
  <table>
    <caption>跨行</caption>
    <tr>
      <td rowspan="2">1-1</td>
      <td >2-1</td>
    </tr>
    <tr>
      <td>2-2</td>
    </tr>
  </table>
  
</body>
</html>